<template>
  <div>
    <nav-bar />
    <van-tabs v-model="active" swipeable sticky>
      <van-tab v-for="(item,index) in category" :title="item.title" :key="index">
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="我也是有底线的，请不要挑战我的底线"
          @load="onLoad"
          :immediate-check="false"
        >
          <div class="fl">
            <index-video
              class="fl_1"
              :categoryData="categoryItem"
              v-for="(categoryItem,categoryIndex) in item.list"
              :key="categoryIndex"
            />
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from "../components/Navbar";
import indexVideo from "../components/indexVideo";
export default {
  components: {
    NavBar,
    indexVideo
  },
  data() {
    return {
      active: "",
      category: {}
    };
  },
  created() {
    this.selectCategory();
    setTimeout(()=>{
        this.$dialog.alert({
              message: '慢慢的我发现对于你，不是一时的好感 。而是我知道遇见你不容易 ，错过了会很可惜！',
        });
    },1000)
  },
  methods: {
    async selectCategory() {
      const res = await this.$http.get("/category");
      this.changeCategory(res.data);
    },
    changeCategory(data) {
      const category1 = data.map((item, index) => {
        item.list = [];
        item.page = 0;
        item.pagesize = 10;
        item.finished = false;
        item.loading = false;
        return item;
      });
      this.category = category1;
    },
    // 把获取到的数据表放到list里面去
    async selectArticle() {
      const catItem = this.categoryItem();
      const res = await this.$http.get("/detail/" + catItem._id, {
        params: {
          page: catItem.page,
          pagesize: catItem.pagesize
        }
      });
      catItem.list.push(...res.data)
      catItem.loading = false
      if(res.data.length < catItem.pagesize){
        catItem.finished = true
      }
    },
    categoryItem() {
      const categoryitem = this.category[this.active];
      return categoryitem;
    },
    onLoad(){
        //触发时 让page+1 然后在重新赋值给数组在发送请求
        const item = this.categoryItem()
        item.page += 1
        setTimeout(()=>{
            this.selectArticle()
        },1000)
        
    }
  },
  watch: {
    active() {
      this.selectArticle();
    }
  }
};
</script>
<style lang="less" scoped>
.fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .fl_1 {
    width: 45%;
  }
}
</style>